<template>
	<view style="position: relative;background-color: #f5f5f5;min-height: 100vh;overflow-y: scroll;">
		<u-navbar  :titleStyle="{color:'white'}" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:placeholder="true">
				<view slot="center" class="flex" style="position: absolute;left: 100rpx;">
					<view class="flex" @click="isAddressShow=true" style="padding-right: 50rpx;">
						<image src="http://qiniuapplet.jiachuangnet.com/dataContact/address.png" mode="" style="width: 27rpx;height: 32rpx;padding-right: 10rpx;"></image>
						<text style="max-width: 200rpx;font-size: 30rpx;color: #fff;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;" >{{checkboxText}}</text>
					</view>
					<view class="store flex"  @click="showStore=true">
						<text style="font-size: 30rpx;color: #fff;max-width: 150rpx;">{{storeList[0][store]}}</text>
						<u-icon name="arrow-down-fill" color="#FFFFFF" size="18"></u-icon>
					</view>
				</view>
		</u-navbar>
		<image src="http://qiniuapplet.jiachuangnet.com/dataContact/bg.png"
			style="width:750rpx;height: 583rpx;position: absolute;top:0;left:0"></image>
		<view style="width:700rpx;min-height:160rpx;position: absolute;top:364rpx;left:25rpx;">
			<view class="pick_date floor flex">
				<image src="http://qiniuapplet.jiachuangnet.com/dataContact/dateIcon.png" mode="" style="width: 34rpx;height: 31rpx;margin-left:40rpx;"></image>
				<view class="btn-start flex">
					<view @click="showStart = true" >{{start?start:'开始时间'}}</view>
				</view>
				<view style="width: 29rpx;height: 0;border-bottom: #1f6edb 4rpx solid;margin: 0 20rpx;"></view>
				<view class="btn-end flex">
					<view @click="showEnd = true" >{{end?end:'结束时间'}}</view>
				</view>
			</view>
			<view class="data_count floor">
				<view class="title">
					<text class="title_text">采购数据</text>
				</view>
				<view class="data_wrapper">
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">总价(元)</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.totalNumPurchase" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">总数（件）</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.putStoragePurchase" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">入库（件）</text>
					</view>
				</view>
			</view>
			<view class="data_count floor" style="margin-top: 20rpx;">
				<view class="title">
					<text class="title_text">单品出库数据</text>
				</view>
				<view class="data_wrapper">
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.singleCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">出库次数(元)</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.singleNum" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">出库单品数量（件）</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">出库总价（元）</text>
					</view>
				</view>
			</view>
			<view class="data_count floor" style="margin-top: 20rpx;height: unset;">
				<view class="title">
					<text class="title_text">品牌方数据</text>
				</view>
				<view class="data_wrapper" style="flex-wrap: wrap;">
					<view class="data_item brand_side">
						<text class="data_title" style="line-height: 40rpx;">里程数(系统)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view class="split"  >
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side">
						<text class="data_title" style="line-height: 40rpx;">总运费(系统)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart(4,'上门费用')">
						<text class="data_title" style="line-height: 40rpx;">上门费用</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandDoorMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandDoorCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart(1,'货拉拉')">
						<text class="data_title"  style="line-height: 40rpx;">货拉拉</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandCargoMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandCargoCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart(3,'内安装费用')">
						<text class="data_title"  style="line-height: 40rpx;">内安装费用</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.inInstallationMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.inInstallationCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart(2,'外安装费用')">
						<text class="data_title"  style="line-height: 40rpx;">外安装费用</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.exInstallationMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.exInstallationCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart(5,'售后费用')">
						<text class="data_title"  style="line-height: 40rpx;">售后费用</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandAfterSale" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandAfterSaleCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side">
						<text class="data_title" style="line-height: 40rpx;">通过次数</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandPassMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandPassCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side">
						<text class="data_title" style="line-height: 40rpx;">驳回次数</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandUnPassMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandUnPassCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side">
						<text class="data_title" style="line-height: 40rpx;">报销金额</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandStoreMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.brandStoreCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
				</view>
				<view class="title" style="height: 120rpx;">
					<text class="title_text" style="border-bottom:unset;">{{titleColumns}}</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts
					      type="column"
					      :opts="opts"
					      :chartData="chartData"
						  :ontouch="true"
						  inScrollView=true
						 :canvas2d="true"
						 canvas-id="column"
					    />
				</view>
			</view>
			<view class="data_count floor" style="margin-top: 20rpx;">
				<view class="title">
					<text class="title_text">售后数据</text>
				</view>
				<view class="data_wrapper">
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">总价(元)</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.afterSaleCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">总数（件）</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.unStatusCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">待处理</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.statusCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">已处理</text>
					</view>
				</view>
			</view>
			<view class="data_count floor" style="margin-top: 20rpx;">
				<view class="title">
					<text class="title_text">盘点数据 </text>
				</view>
				<view class="data_wrapper">
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.movingDiskCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">动盘次数</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">动盘差额</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.staticDisk" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">静盘次数</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">静盘差额</text>
					</view>
				</view>
			</view>
			<view class="data_count floor" style="margin-top: 20rpx;">
				<view class="title">
					<text class="title_text">调货数据</text>
				</view>
				<view class="data_wrapper">
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.pullCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">调出总数</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">调出总价</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="dashboards.tuneInCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">调入总数</text>
					</view>
					<view class="data_item">
						<u-count-to :startVal="0" :endVal="0" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>
						<text class="data_title">调入总价</text>
					</view>
				</view>
			</view>
			<view class="data_count floor" style="margin-top: 20rpx;height: unset;">
				<view class="title">
					<text class="title_text">仓库方数据</text>
				</view>
				<view class="data_wrapper" style="flex-wrap: wrap;">
					<view class="data_item brand_side" @click="getChart1(1,'采购费用')">
						<text class="data_title" style="line-height: 40rpx;">采购费用</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaPurchaseMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaPurchaseCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(9,'工厂质量问题(工厂)')">
						<text class="data_title" style="line-height: 40rpx;">工厂质量问题(工厂)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaQualityMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaQualityCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(10,'少发漏发错发(仓库)')">
						<text class="data_title" style="line-height: 40rpx;">少发漏发错发(仓库)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaLessMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaLessCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(11,'安装细节问题(安装)')">
						<text class="data_title" style="line-height: 40rpx;">安装细节问题(安装)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaInstallMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaInstallCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(12,'店铺尺寸问题')">
						<text class="data_title" style="line-height: 40rpx;">店铺尺寸问题</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaSizeMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaSizeCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(2,'快递货拉拉到前月店铺费用')">
						<text class="data_title" style="line-height: 40rpx;">到前月店铺(货拉拉))</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaCargoStoreMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaCargoStoreCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(13,'安装好后人为破坏')">
						<text class="data_title" style="line-height: 40rpx;">安装好后人为破坏</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaDamageMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaDamageCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(3,'生活费用(房租、吃饭)出差费用(车票、住宿)')">
						<text class="data_title" style="line-height: 40rpx;">生活费+出差</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaLifeMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaLifeCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(4,'快递货拉拉到零食很忙总部跟零食很忙各仓费用')">
						<text class="data_title" style="line-height: 40rpx;">货拉拉(零食很忙)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaCargoMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaCargoCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(5,'请临时工费用')">
						<text class="data_title" style="line-height: 40rpx;">临时工(仓库)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaTempMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaTempCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(6,'货架回仓库')">
						<text class="data_title" style="line-height: 40rpx;">货架回仓库</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaShelfMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaShelfCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(7,'月租金(仓库)')">
						<text class="data_title" style="line-height: 40rpx;">月租金(仓库)</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaRentMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaRentCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(8,'缺货')">
						<text class="data_title" style="line-height: 40rpx;">缺货</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaLackMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaLackCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
					<view class="data_item brand_side" @click="getChart1(14,'其他')">
						<text class="data_title" style="line-height: 40rpx;">其他</text>
						<view class="flex">
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaOtherMoney" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>元
							</view>
							<view  class="split">
								/
							</view>
							<view class="num_box">
								<u-count-to :startVal="0" :endVal="dashboards.areaOtherCount" separator="," :duration="2000"  color="#3077FF" fontSize="34rpx"></u-count-to>次
							</view>
						</view>
					</view>
				</view>
        <view class="title">
          <text class="title_text">{{titleLine}}</text>
          <view class="charts-box">
            <qiun-data-charts
                type="area"
                :opts="opts1"
                :chartData="chartData1"
                :ontouch="true"
                inScrollView=true
                :canvas2d="true"
                canvas-id="line"
            />
          </view>
        </view>
			</view>
			<view class="data_count floor" style="margin-top: 20rpx;height: unset;margin-bottom: 116rpx;">
				<view class="title">
					<text class="title_text">售后类型</text>
				</view>
				<view style="height: 450rpx;display: flex;justify-content: center;" >
					<view class="charts-box charts-box4" style="padding: 20rpx;overflow: hidden;">
						<qiun-data-charts 
						      type="ring"
						      :opts="opts4"
						      :chartData="chartData4"
							  :ontouch="true"
							  inScrollView=true
							  :canvas2d="true"
							  canvas-id="ring5"
						    />
					</view>
				</view>
			</view>
		</view>
		<!-- <u-picker :show="showWarehouse" :columns="columns" @cancel="showWarehouse=false" @confirm="confirmWarehouse"></u-picker> -->
		<u-picker :show="showStore" :columns="storeList" @cancel="showStore=false" @confirm="confirmStore"></u-picker>
		<u-datetime-picker
		        :show="showStart"
		        v-model="timeStart"
		        mode="date"
				@confirm="confirmStart"
				@cancel="showStart=false"
		></u-datetime-picker>
		<u-datetime-picker
		        :show="showEnd"
		        v-model="timeEnd"
		        mode="date"
				@confirm="confirmEnd"
				@cancel="showEnd=false"
		></u-datetime-picker>
		<u-popup :show="isAddressShow" @close="isAddressShow=false" >
		    <view style="padding: 50rpx" class="areaList_box">
				<view style="color: #6F7276;padding: 10rpx 0;">
					* 请选择要查看数据的仓库,不选默认全部
				</view>
		         <u-checkbox-group
		                    v-model="checkboxValue1"
		                    @change="checkboxChange"
							placement="row"
		                >
		                    <u-checkbox
		                        :customStyle="{marginBottom: '8px'}"
		                        v-for="(item, index) in checkboxList1"
		                        :key="index"
		                        :label="item.areaName"
		                        :name="item.area"
		                    >
		                    </u-checkbox>
		                </u-checkbox-group>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				storeList:[["所有店铺","新店","老店"]],
				store:0,//0处理成bull,1:新店;2老店
				showStore:false,//控制店铺类型选择显示
				checkboxList1:[],//所有仓库地址
				checkboxText:'全部',
				checkboxValue1:[],//绑定选定仓库数组
				isAddressShow:false,//控制选取仓库显示
				dashboards:null,//数据面板
				titleColumns:'',//条形图的title
				titleLine:'',//折线图的title
				start:"",//处理成xxxx-xx-xx格式
				end:"",
				timeStart:"",//绑定时间--未处理
				timeEnd:"",
				showStart: false,//控制开始时间选择器的
				showEnd:false,
				chartData:{},//条形图数据
				chartData1:{},//折线图数据
				chartData4:{},//扇形数据
				opts4: {
						title:{
							name:'',
							
						},
						padding: [0,20,0,20],
						fontColor:'#A6CDFF',
				        rotate: false,
				        rotateLock: false,
				        color: ["#1890FF","#15b5ff","#00aa00","#aaff00","#FAC858","#fab156","#EE6666","#ee4839","#ff55ff","#00ff00","#8b5ba2","#FC8452","#aa00ff","#ea7ccc","#eaafd5","#1a3aee","#9415ee"],
				        padding: [5,5,5,5],
				        dataLabel: true,
				        enableScroll: false,
				        legend: {
				          show: false,
				          position: "bottom",
				          lineHeight: 25
				        },
				        // title: {
				        //          name: "收益率",
				        //          fontSize: 15,
				        //          color: "#666666"
				        //        },
				        subtitle: {
				          name: "",
				        },
				        extra: {
				         ring: {
				            ringWidth: 20,
							customRadius:60,
				            activeOpacity: 0.5,
				            activeRadius: 10,
				            offsetAngle: 0,
				            labelWidth: 15,
				            linearType: "custom",
							border: false
				            },
						  tooltip:{
							  showBox:true
						  }
				        }
				      },
				opts1: {
					 enableScroll: true,
				        color: ["#3B82F6"],
				        padding: [30,10,15,0],
				        dataLabel: false,
						dataPointShape:true,
				        legend: {
							show:false
						},
				        xAxis: {
						  axisLine:false,
				          disableGrid: true,
						  fontColor:"#333333",
						  marginTop:5,
						  labelCount:3,
						  itemCount:10,
						  scrollShow:true,
				        },
				        yAxis: {
				          gridType: "solid",
						  gridColor:"#333333",
						  showTitle:true,
				          data: [
				            {
							 axisLine: false,
							title: "单位:元",
							titleFontColor:"#333333",
							fontColor:"#333333",
							titleOffsetY:-10
				            }
				          ]
				        },
				        extra: {
				          area: {
								type: "curve",//曲线圆滑模式
								opacity: 0.5,
								addLine: true,
								width: 2,
								gradient: true,//开启区域图渐变色
								activeType: "hollow"//激活指示点类型-空心点模式
				            },
				        }
				      },
				opts: {
					       // color: ["#1890FF"],
						   dataLabel:false,
					       // padding: [30,10,15,10],
					       enableScroll: true,
						   show:true,
					       legend: {
							   show:false
						   },
					       xAxis: {
							   labelCount:3,
							   itemCount:10,
							   scrollShow:true,
					         disableGrid: true,
							  fontColor:"#333333",
							  marginTop:5,
					       },
					       yAxis: {
					        // gridType: "solid",
					        // gridColor:"#8EE3FF",
					        showTitle:true,
					        data: [
					          {
					        	axisLine: false,
					        	title: "单位:元",
					        	titleFontColor:"#333333",
					        	fontColor:"#333333",
								// titleOffsetY:10
					          }
					        ]
					       },
					       extra: {
					         column: {
					           type: "group",
					           width: 30,
							   categoryGap:2,
							   linearType:"custom",
							   customColor:["#4A2CCB","#1F5BFF"],
							   colorStop:0.5,
					         },
					       }
					     }
			}
		},
		onShow() {
			// this.storeList[0]=["所有店铺","新店","老店"]
			this.getAreaList()
		},
		methods:{
			// getIndex(e){
			// 	console.log(e,'..')
			// 	this.opts4.title=e.currentIndex
			// },
			// 获取扇形数据
			getSaleAfter() {
			      const params = {
			        areaIds: this.checkboxValue1,
			        startTime: this.start,
			        endTime: this.end,
					storeType: this.store||null,
			      };
				  uni.$u.http.post('/dashboards/getAfterSaleInfo', params).then(res => {
					let jsonArr = [];
					var keyArr = res.afterSaleType;
					var valueArr = res.afterSaleRatio;
					for (var i = 0; i < keyArr.length; i++) {
					var json = {};
					for (var j = 0; j < valueArr.length; j++) {
							if (i == j) {
								json.value = valueArr[j];
								json.name = keyArr[i];
								json.labelText=`${keyArr[i]}`
								jsonArr.push(json);
							}
						}
					}
					let data = {
					      series: [
					        {
					          data: jsonArr,
							  textSize:10,
							  textColor:'#90F489',
					        }
					      ]
					    };
					  this.chartData4 = JSON.parse(JSON.stringify(data));
				  })
			     
			    },
			// 选择店铺类型
			confirmStore(e){
				this.store=e.indexs[0]
				this.showStore=false
				this.getPurchaseData()
			},
			// 选择仓库
			checkboxChange(e){
				this.checkboxValue1=e
				this.getPurchaseData()
				if(e.length==[]||this.checkboxList1.length==e.length) return this.checkboxText="全部"
				let text=''
				e.map(id=>{
					if(text){
						text=text+'、'+ this.checkboxList1.find(item=>item.area==id).areaName
					}else{
						text= this.checkboxList1.find(item=>item.area==id).areaName
					}
					
				})
				return this.checkboxText=text
			},
			// 获取条形图数据
			 getChart(val, text) {
				  this.titleColumns=(text||'品牌方') + '数据统计图'
				  this.chartData={}
			      const params = {
			        areaIds: this.checkboxValue1,
			        startTime:this.start,
			        endTime: this.end,
			        storeType: this.store||null,
			        financeId: val||null
			      }
			      uni.$u.http.post('/dashboards/getBrandHistogramData',params).then(res => {
					  let data = {
						categories: res.dateList,
					      series: [
					        {
					          name: (text||'品牌方') + '数据统计图',
					          data: res.brandHistogramList||[],
					        }
					      ]
					    };
					  this.chartData = JSON.parse(JSON.stringify(data));
			      })
			},
			// 获取折线图数据
			getChart1(val, text){
				this.titleLine=(text||'仓库方') + '数据统计图'
				this.chartData1={}
				const params = {
				  areaIds: this.checkboxValue1,
				  startTime:this.start,
				  endTime: this.end,
				  storeType: this.store||null,
				  type: val||null
				}
				uni.$u.http.post('/dashboards/getAreaLineChart',params).then(res => {
					let data = {
					categories: res.dateList,
					    series: [
					      {
					        name: (text||'仓库方') + '数据统计图',
					        data: res.brandHistogramList||[],
					      }
					    ]
					  };
					this.chartData1 = JSON.parse(JSON.stringify(data));
				})
			},
			// 根据仓库id获取name
			getAreaText(areaId){
				return this.warehouseList.find(item=>item.area==areaId).areaName
			},
			// 获取面板数据
			getPurchaseData(){
				uni.$u.http.post('/dashboards/getPurchaseData',{
					 areaIds: this.checkboxValue1,
					 startTime:this.start,
					 endTime: this.end,
					 storeType: this.store||null
				}).then(res => {
					this.dashboards=res
					this.getChart()
					this.getChart1()
					this.getSaleAfter()
				})
			},
			// 选取开始时间
			confirmStart(e){
				this.start=uni.$u.timeFormat(e.value, 'yyyy-mm-dd') 
				if(this.end) {
					this.getPurchaseData()
				}
				this.showStart=false
			},
			// 选择结束时间
			confirmEnd(e){
				this.end=uni.$u.timeFormat(e.value, 'yyyy-mm-dd') 
				this.getPurchaseData()
				this.showEnd=false
			},
			// 获取所有仓库列表
			getAreaList(){
				uni.$u.http.get('/areaLedger/areaList').then(res => {
					this.checkboxList1=res
					this.getPurchaseData()
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	::v-deep.areaList_box{
		.u-checkbox-group{
			flex-wrap: wrap;
			&>view{
				padding: 10rpx 25rpx;
			}
		}
	}
	.split{
		padding: 0 10rpx;
		color: #e8eaee;
	}
	.charts-box {
		width: auto;
		height:386rpx;
		position: inherit
	 }
	.pick_date{
		height: 90rpx;
		background-image: url("http://qiniuapplet.jiachuangnet.com/dataContact/time.png");
	}
	.floor{
		/* margin: 19rpx 24rpx;
		padding: 25rpx 22rpx; */
		background-size: 100% 100%;
		background-repeat: repeat;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.btn-start,.btn-end{
		flex: 1;
		justify-content: center;
		color: #A6A6A6;
	}
	
	.data_count{
		height: 204rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 38rpx;
	}
	.data_wrapper{
		padding-bottom: 37rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		.brand_side{
			background-color: #ebf2fe; 
			width: 319rpx; 
			height: 131rpx;
			border-radius: 15rpx;
		}
		.data_item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 13rpx;
			.data_title{
				font-weight: 500;
				font-size: 24rpx;
				color: #6F7276;
			}
			.num_box{
				font-size: 24rpx;
				color: #6F7276;
			}
		}
	}
	
	.title{
		padding-left: 22rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #1E272E;
		line-height: 93rpx;
		.title_text{
			border-bottom: 10rpx solid #bbd3f4;
		}
	}
</style>